<template>
  <div class="det_adds_box">
    <div class="det_adds" v-for="(item, index) in goodsList" :key="index">
      <div class="closeTab" @click="fnSonToFather" v-if="index==0"></div>
      <img :src="baseURL + item.gscMaincolPath" alt="" class="det_adds_img" />
      <div class="det_adds_title">{{ item.goodsName }}</div>
      <div data-goodstype="1" class="thisGoodsCode">
        &nbsp;{{ item.gsColorCode }} <span class="nowPrice"></span>
      </div>
      <div class="goodsInfo">
        <p class="nowPrice">￥{{ item.discountPrice }}</p>
        <p class="oldPrice">￥{{ item.originalPrice }}</p>
      </div>
      <div class="colorTab">
        <ul>
          <li data-color="419398515E39" data-discount="0.38" data-nowprice="302.4" status="InShelf" data-oldprice="799"
            class="colorInfo selectedColor">
            {{ item.colorAlias }}
          </li>
        </ul>
      </div>
      <div class="sizeTab">
        <ul>
          <li :data-size="itm.sku" class="sizeInfo selectedColor" v-for="(itm, idx) in sizeInfo" :key="idx">
            <span class="block">
              <span @click="fnStock(itm, idx)" :class="idx == isClass ? 'blackBg' : ''"
                v-if="item.sellStock == 0 ? false : true">
                {{ itm.sizeAlias }}
              </span>
            </span>
          </li>
        </ul>
      </div>
      <div class="det_adds_quantify">
        <div class="det_adds_quantify_btn1" @click="fnCal({idx:index,n:-1,stock})">-</div>
        <div class="det_adds_quantify_inp1">{{  item.productNum }}</div>
        <div class="det_adds_quantify_btn2" @click="fnCal({idx:index,n:1,stock})">+</div>
        <div class="goodsStock">
          <div class="">库存:</div>
          <div>&nbsp;{{ stock }}&nbsp;</div>
        </div>
      </div>
      <button class="det_btn" @click="fn(item.productNum)">
        添加至个人中心中的购物车
      </button>
    </div>
  </div>

</template>

<script>
  import {
    goodsCart,
    goodsCartPop
  } from "@/api/goodsCart";
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        baseURL: 'https://m.selected.com.cn/',

        sizeInfo:null,
        // 备用
        color:null,

        isClass:null,
        stock:null,
      }
    },
    props: {
      msg: {
        type: Object
      }
    },
    computed: {
      ...mapState({
        goodsList: state => state.cart.goodsList
      })
    },
    async created() {
      // console.log(this.msg);
      let resCart = await goodsCartPop(this.msg)
      // console.log(resCart);
      this.color=resCart.data.data.color
      // console.log( this.color);
      this.sizeInfo=resCart.data.data.color[0].sizes
      // console.log( this.sizeInfo);
      
    },
    methods: {
      ...mapMutations({
        // cartDel: 'cart/cartDel',
        // cartStatus: 'cart/cartStatus',
        // cartAllCheck: 'cart/cartAllCheck',
        fnCal: 'cart/cartCal',
        // fnDelChecked: 'cart/cartDelChecked',
      }),
      fnSonToFather() {
        this.$emit("pop-click")
      },
      fnStock(itm,idx){
        this.isClass = idx
        this.stock = itm.sellStock
      },
      fn(n){
        if(n>this.stock){
          return -1
        }
        this.$emit("pop-click")
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import url(../assets/css/default.css);
  @import url(../assets/css/details.css);

  .sizeInfo {
    color: #d4d4d4;
    background: #fff;
    font-size: 12px;
  }

  .blackBg {
    background: #000;
    color: #fff;
    font-size: 12px;
  }

  .det_adds_quantify {
    width: 100%;
  }
</style>
